<!--爬虫任务参数设置-->
<template>
    <div style="border: 1px solid rgb(185, 185, 185); padding: 5px; height: 700px">
        <el-container>
            <!--数据库连接设置-->
            <el-header align="left" height="10px">
                <div class="grid-content">数据库连接设置</div></el-header>
            <el-main>
                <div style="border: 1px solid rgb(185, 185, 185); padding: 10px; width:98%;height: 150px; position: relative">
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <div class="grid-content " align="left">
                                数据库主机地址:
                                <el-input v-model="form.sqlipAddress" placeholder="127.0.0.1" size="mini" style="width: 50%;">
                                </el-input>
                            </div>
                        </el-col>
                        <el-col :span="5">
                            <div class="grid-content ">
                                端口号:
                                <el-input v-model="form.sqlPort" placeholder="3307" size="mini" style="width: 60%;">
                                </el-input>
                            </div>
                        </el-col>
                        <el-col :span="5">
                            <div class="grid-content ">
                                用户名:
                                <el-input v-model="form.sqlUsername" placeholder="admin" size="mini" style="width: 60%;">
                                </el-input>
                            </div>
                        </el-col>
                        <el-col :span="5">
                            <div class="grid-content ">
                                密码:
                                <el-input v-model="form.sqlPassword" placeholder="123" size="mini" style="width: 60%;">
                                </el-input>
                            </div>
                        </el-col>
                    </el-row>
                    <el-button style="position: absolute; bottom: 10px; right: 10px;" size="small" @click="connectsubmit">保存</el-button>
                </div>
            </el-main>
            <!--爬虫参数设置-->
            <el-header align="left" height="10px">爬虫参数设置</el-header>
            <el-main>
                <div style="border: 1px solid rgb(185, 185, 185); padding: 10px; width:98%;height: 150px; position: relative">
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <div class="grid-content ">
                                并行任务数上限:
                                <el-input v-model="form.taskLimit" placeholder="test" size="mini" style="width: 60%;">
                                </el-input>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ">
                                去重规则:
                                <el-input v-model="form.repeatRule" placeholder="test" size="mini" style="width: 60%;">
                                </el-input>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ">
                                数据存储路径:
                                <el-input v-model="form.storePath" placeholder="test" size="mini" style="width: 60%;">
                                </el-input>
                            </div>
                        </el-col>
                    </el-row>
                    <el-button style="position: absolute; bottom: 10px; right: 10px;" size="small" @click="submit">保存</el-button>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        data: function () {
            return {
                form: { // 表单数据
                    sqlipAddress: '',
                    sqlPort: '',
                    sqlUsername: '',
                    sqlPassword: '',
                    crawlID: '',
                    taskLimit: '',
                    repeatRule: '',
                    storePath: ''

            },
            }},
        methods: {
            connectsubmit() {//数据库连接提交
                this.$message({
                    showClose: true,
                    message: '数据库连接配置成功',
                    type: 'success'
                });
                axios.post('/api/crawlTask/sqlAssign', this.form, {
                    headers: {
                        'Content-Type': 'application/json' // 设置请求头，确保服务器正确解析 FormData
                    }
                })
            },
            submit() {//爬虫参数提交
                this.$message({
                    showClose: true,
                    message: '爬虫参数设置成功',
                    type: 'success'
                });
                axios.post('/api/crawlTask/crawlAssign', this.form, {
                    headers: {
                        'Content-Type': 'application/json' // 设置请求头，确保服务器正确解析 FormData
                    }
                })
            }
        }
    }
</script>

<style>

</style>
